<template>
  <el-card>
    <el-tabs>
      <!-- Element -->
      <el-tab-pane label="Element">
        <div class="grid">
          <div class="item" v-for="[key] in Object.entries(ElementPlusIconsVue)" :key="key" @click="copy(elementText(key))">
            <component :is="key" style="width: 30px; height: 30px;"></component>
          </div>
        </div>
      </el-tab-pane>
      <!-- SVG -->
      <el-tab-pane label="SVG">
        <div class="grid">
          <div class="item" v-for="{ name } in svgList" :key="name" @click="copy(svgText(name))">
            <SvgIcon :name="svgName(name)" size="30px" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts" name="icons">
// Element
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// SVG
const svgList = import.meta.glob('/src/views/icons/svg/*.svg')
function svgName(name: string) {
  return name.split("svg/")[1].split(".svg")[0];
}

// 点击复制
import { copy } from '@/utils/index'
function elementText(key: string) {
  return `<el-icon><${key} /></el-icon>`
}
function svgText(name: string) {
  return `<SvgIcon name="${svgName(name)}" />`
}
</script>

<style scoped>
.grid {
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-template-rows: repeat(auto-fill, 50px);
}
.item {
  padding: 10px;
}
.item:hover {
  background: rgb(242, 246, 252);
}
</style>
